<template>
   <!--
    antdesign布局临界值：
    { xs: '480px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1600px', }
    bootstrap布局临界值：
    https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
    -->
  <div>
    <a-row>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" style="background: cornflowerblue">Col</a-col>
      <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" style="background: pink">Col</a-col>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" style="background: #52c41a">Col</a-col>
    </a-row>

    <!--antdesign：{ xs: '480px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1600px', }-->
    <!--推荐参考指数，手机：（320~425） 平板：（425~768） PC电脑:(1024~1440)-->
    <!--在手机和平板上不显示左右两边内容，只在pc上显示中间内容-->
    <a-row style="margin-top: 50px;">
      <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6" style="background: cornflowerblue">Col</a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="background: pink">Col</a-col>
      <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6" style="background: #52c41a">Col</a-col>
    </a-row>

    <!--与上面的写法等价-->
    <a-row style="margin-top: 50px;">
      <a-col  :xs="0" :lg="6" :xl="6" style="background: cornflowerblue">Col</a-col>
      <a-col :xs="24" :lg="12" :xl="12" style="background: pink">Col</a-col>
      <a-col :xs="0" :lg="6" :xl="6" style="background: #52c41a">Col</a-col>
    </a-row>



  </div>
</template>
<style scoped>

</style>
